import React, {Component, PureComponent} from 'react';
import Vertex from "./vertex";
import Edge from "./edge";
import {xBias} from "./Const";


class CanvasSVGForFac extends Component {
    constructor() {
        super();
    }

    render() {
        if (this.props.reset)

            return (
                <div
                    id = "scroll"

                    style={{
                    width: "100%",
                    height: "40vh",
                    position: "relative",

                }}
            >
                <svg viewBox="0 0 240 120" xmlns="http://www.w3.org/2000/svg"
                     id="img"
                     border="0"
                        ref={dom => {
                            this.imgDom = dom;
                            }}
                        style={{
                                position: "absolute",
                                height: "100%",
                        }}

                >
                </svg>
            </div>
            )

        return (
                <div
                    id = "scroll"
                    style={{

                    width: "100%",
                    height: "40vh",
                    position: "relative",
                }}
                >
                <svg  viewBox={"0 0 " + xBias * 2 + " " + 40}  preserveAspectRatio="xMidYMin"   xmlns="http://www.w3.org/2000/svg"
                     id="img"
                     border="0"


                        ref={dom => {
                            this.imgDom = dom;
                            }}
                        style={{

                                position: "absolute",
                                width: "100%",
                                height: "100%",

                        }}
                >
                    {
                        this.props.edges.map((edge, cellidx) => {
                            return (
                                <Edge
                                    time = {this.props.time}
                                    id={cellidx}

                                    pos={{ x1: edge.x1, y1: edge.y1,
                                           x2: edge.x2, y2: edge.y2
                                    } }
                                />
                            );
                        })
                    }
                    {
                        this.props.vertices.map((vertex, cellidx) => {
                            return (
                                <Vertex
                                    nSymbol = {this.props.nSymbol}
                                    nowValue = {this.props.nowValue}
                                    time = {this.props.time}
                                    // key={vertex.id}
                                    id={cellidx}
                                    current={this.props.setGreenFlag ? vertex.isLeaf :this.props.current === cellidx}
                                    redNumber = {this.props.redNumber}
                                    label={vertex.label}
                                    ret={vertex.val}
                                    pos={{ x: vertex.x, y: vertex.y,
                                          px: vertex.px, py: vertex.py}}
                                    nrFlag = {this.props.nrFlag}

                                    algo = {this.props.algo}
                                />
                            );
                        })
                    }
                </svg>
            </div>
        );
    }
}

export default CanvasSVGForFac;